<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div></div>
  <button id="btn1">点击我</button>
  <button id="btn2" onclick="fun()">点击我</button>
  <script>
    var div = document.querySelector('div');
    var btn1 = document.querySelector('#btn1');
    var btn2 = document.querySelector('#btn2');
    // 绑定事件 元素.on事件类型 = function(){} 事件处理程序
    btn1.onclick = function(){
      div.innerHTML = '<p>段落标签</p>';
      div.style.width = '100px';
      div.style.height = '100px';
      div.style.backgroundColor = 'red';
    }
    function fun(){
      alert('btn2')
    }
    /**
     * 事件三要素组成：
     *  1.事件源 给html元素设置事件 
     *  2.事件类型 鼠标单击 鼠标双击 键盘 
     *  3.事件处理程序  function(){}
    */
  </script>
</body>
</html>